<template>
	<view>
		<stop isBack>
			<view slot="content">常用设备</view>
		</stop>
		
		<view class="bcf mart3 pad3">
			<view  v-if="isbool(showSelector)">
			<machine-selector v-model="curMachine"></machine-selector>
			<view>
				<view @tap="selectIt" class="cu-btn lg round w100 line-green">确认添加</view>
			</view>
			</view>
			<view class="pad5 bdda tac" @tap="showSelector = !showSelector" v-if="!showSelector">
				选择设备
			</view>
		</view>
		<view class="bcf pad3 mart3">
			<view class="pad3 flrc pos-r">
				<view class="flex1 fwb fs12 c11 list-style-1">已选设备</view>
				<ripple></ripple>
			</view>
			<view class="">
				<view class="bcf bdso pad3 mart3 pos-r ofh" @tap="mySlide(index)"  
				v-for="item,index in machinesFocusLocalData" :key="item">
					<machine-item :iri="item"></machine-item>
					<ripple-black></ripple-black>
					<sslide ref="mySlideBox">
						<view @tap="deleteIt(index)" class="pad5 round3 bg-orange">
							<view>移除</view>
						</view>
					</sslide>
				</view>
			</view>
			
			<view  v-if="machinesFocusLocalData.length === 0" class="pad2 tac">
				<view class="pad7 bdda bc13">未选择任何设备</view>
			</view>
		</view>


	</view>
</template>

<script>
	import machineItem from '../../templete/machine/machine_item.vue'
	import machineSelector from '../../templete/machine/machine_picker.vue'
	export default {
		components:{machineItem,machineSelector},
		data() {
			return {
				machinesFocusLocalData:[],
				showSelector:false,
				curMachine:''
			}
		},
		methods: {
			selectIt() {
				this.log(this.curMachine)
				if(this.curMachine === ''){
					this.$com.showToast("请选择")
					return
				}
				if(this.machinesFocusLocalData.length > 2){
					this.$com.showToast("最多添加三台设备")
					return
				}
				if(this.$com.isInArray(this.curMachine, this.machinesFocusLocalData)){
					this.$com.showToast("该设备已存在")
					return
				}
				this.machinesFocusLocalData.push(this.curMachine)
				
				this.showSelector = false
				this.curMachine = ""
				
				this.$com.setLocData("machinesFocusLocalData", this.machinesFocusLocalData)
			},
			deleteIt(index){
				this.machinesFocusLocalData = this.$com.arrayDelIndex(this.machinesFocusLocalData,index)
			}
		},
		mounted() {
			let machinesFocusLocalData = this.$com.getLocDataObject("machinesFocusLocalData")
			if (this.isbool(machinesFocusLocalData)) {
				this.log(machinesFocusLocalData)
				this.machinesFocusLocalData = machinesFocusLocalData
			}

		}
	}
</script>

<style>

</style>
